
<!DOCTYPE html>
<html>
    <head>
        <title>Network</title>
        <meta charset="UTF-8">   
                                  
        <script src="../../../../lib/core/ht.js"></script>
        <script src="../../../../lib/plugin/ht-obj.js"></script> 
        <script src="../../../../lib/plugin/ht-form.js"></script>  
              
        <script>
            function getRawText(obj){
                var text = String(obj); 
                return text.substring(14, text.length-3);
            }            
        </script>                 
        <script src="mac.mtl.js"></script> 
        <script src="mac.obj.js"></script>                 
        <script>                                      

            ht.Default.setImage('server', '');
            ht.Default.setImage('texture', '');

            ht.Default.setImage('alarmVector', {
              "width": 120,
              "height": 130,
              "comps": [
                {
                  "type": "rect",
                  "rect": [50, 75, 20, 50],
                  "background": {
                    "value": "gray",
                    "func": "attr@alarm.color"
                  },
                  "gradient": "spread.horizontal"                      
                },
                {
                  "type": "triangle",
                  "rect": [13, 5, 94, 84],
                  "background": {
                    "value": "gray",
                    "func": "attr@alarm.color"
                  }
                },
                {
                  "type": "circle",
                  "rect": [49, 43, 21, 13],
                  "background": 'rgba(255, 255, 255, 0.9)'
                },
                {
                  "type": "rect",
                  "rect": [56, 59, 8, 22],
                  "background": 'rgba(255, 255, 255, 0.9)'
                }
              ]
            });

            function init(){                                                                                                                                              
                dataModel = new ht.DataModel();
                                
                g3d = new ht.graph3d.Graph3dView(dataModel);    
                g3d.setEye(400, 500, 900);
                g3d.setCenter(0, 100, 0);
                g3d.setGridVisible(true);
                g3d.setDashDisabled(false);      
                g3d.getView().style.background = '#37374C';
                
                formPane = new ht.widget.FormPane();   
                propertyView = new ht.widget.PropertyView(dataModel);
                
                borderPane = new ht.widget.BorderPane();  
                borderPane.setTopView(formPane, 223);
                borderPane.setCenterView(propertyView);                
                
                new ht.widget.SplitView(g3d, borderPane, 'h', 0.7).addToDOM();   
                                               
                flowTask = {
                    interval: 50,
                    action: function(data){
                        if(data.a('flow.enabled')){
                            var offset = data.s('edge.dash.offset') + data.a('flow.step') * data.a('flow.direction');                        
                            data.s('edge.dash.offset', offset);                        
                        }                    
                    }
                };
                dataModel.addScheduleTask(flowTask);    
                
                blinkTask = {
                    interval: 500,
                    action: function(data){
                        if(data.a('blink.enabled')){
                            var color = data.a('screen.color');                        
                            if(color === data.a('origin.color')){
                                color = data.a('blink.color');
                            }else{
                                color = data.a('origin.color');
                            }
                            data.a('screen.color', color);
                        }                    
                    }        
                };
                dataModel.addScheduleTask(blinkTask); 
                
                scaleTask = {
                    interval: 50,
                    action: function(data){
                        if(data.a('scale.enabled')){
                            var shrink = data.a('scale.shrink'),
                                value = data.a('scale.value'),
                                step = data.a('scale.step');
                            if(shrink){
                                value -= step;
                                if(value < 0){
                                    value = 0;
                                    data.a('scale.shrink', false);                               
                                }                            
                            }else{
                                value += step;
                                if(value > 1){
                                    value = 1;
                                    data.a('scale.shrink', true);
                                } 
                            }
                            data.a('scale.value', value);                                                
                        }                    
                    }
                };
                dataModel.addScheduleTask(scaleTask);                
                
                initDataModel();                
                initFormPane();   
                initPropertyPane();                
            }            

            function initDataModel(){
                
                // desktop
                ht.Default.setShape3dModel('desktop', ht.Default.createRingModel([
                    300, 120,
                    320, 100,
                    450, 100,
                    330, 80,
                    330, 0,
                    300, 0,
                    300, 120
                ], null, 20, false, false, 50));     
                var desktop = new ht.Node();
                desktop.s({
                    '3d.selectable': false,
                    'shape3d': 'desktop',
                    'shape3d.image': 'texture',
                    'shape3d.uv.scale': [5, 2]
                });
                desktop.s3(1, 1, 1);
                dataModel.add(desktop);
                
                // server
                var server = new ht.Node();
                server.s({
                    '3d.move.mode': 'y',
                    'all.color': '#757475',
                    'front.image': 'server'                    
                });
                server.a({
                    'scale.enabled': true,
                    'scale.value': 1,
                    'scale.step': 0.1,
                    'scale.shrink': true,
                    'alarm.color': 'red'
                });
                server.addStyleIcon('alarm', {
                    names: ['alarmVector'],                    
                    autorotate: 'y',
                    face: 'center',
                    position: 3,
                    width: { func: function(data){ return 120 * data.a('scale.value'); } },
                    height: { func: function(data){ return 130 * data.a('scale.value'); } },
                    discardSelectable: false
                });                
                server.s3(80, 220, 80);
                server.p3(0, 150, 0);                
                dataModel.add(server);
                
                // load mac 3d model
                var params = {
                    s3: [100, 100, 100],
                    cube: true,
                    shape3d: 'mac'
                }; 
                var modelMap = ht.Default.parseObj(mac_obj, mac_mtl, params);                
                var rawS3 = params.rawS3;
                modelMap['LCD'].color = { func: 'attr@screen.color' };                            
                
                var count = 16;
                var radius = 400;
                for(var i=0; i<count; i++){
                    
                    // mac
                    var color = ht.Color.chart[i%ht.Color.chart.length];
                    var mac = new ht.Node();
                    var angle = Math.PI * 2 * i / count;
                    var cos = Math.cos(angle);
                    var sin = Math.sin(angle);
                    mac.p3(radius*cos, 103, radius*sin); 
                    mac.r3(0, -angle+Math.PI/2, 0);
                    mac.s3(rawS3); 
                    mac.s({
                       'shape3d': 'mac' 
                    });
                    mac.a({
                        'screen.color': color,                        
                        'blink.enabled': true,
                        'origin.color': color,
                        'blink.color': 'black'
                    });
                    dataModel.add(mac);

                    // edge
                    var edge = new ht.Edge(mac, server);
                    edge.s({
                        'edge.width': 4,
                        'edge.color': color,
                        'edge.dash': true,
                        'edge.dash.color': 'yellow',
                        'edge.dash.pattern': [10, 25],
                        'edge.type': 'points',
                        'edge.gradient.color': 'red',
                        'edge.points': [
                            {x: 320*cos, e: 105, y: 320*sin},
                            {x: 295*cos, e: 125, y: 300*sin},
                            {x: 295*cos, e: 10, y: 300*sin},
                            {x: 30*cos, e: 10, y: 30*sin}
                        ]
                    });
                    edge.a({
                        'flow.enabled': true,
                        'flow.direction': -1,
                        'flow.step': 1
                    });
                    dataModel.add(edge);
                }  
                
                dataModel.sm().ss(edge);
            }

            function initFormPane(){ 
            
                // Blink Task
                formPane.addRow([{ element: 'Screen Blink', font: 'bold 12px arial, sans-serif' }], [0.1]);
                formPane.addRow([], [], 1.01, {background: '#43AFF1'});   
                formPane.addRow([
                    {
                        checkBox: {
                            label: 'Enable Blink',                 
                            selected: true,
                            onValueChanged: function(){
                                blinkTask.enabled = this.getValue();
                                if(!blinkTask.enabled){
                                    dataModel.each(function(data){
                                        var color = data.a('origin.color');
                                        if(color){
                                            data.a({
                                                'screen.color': color,
                                                'blink.color': 'black'
                                            });
                                        }
                                    });
                                }
                            }
                        }
                    },
                    {
                        slider: {                    
                            min: 0,
                            max: 1000,
                            step: 100,
                            value: blinkTask.interval,                            
                            onValueChanged: function(){     
                                blinkTask.interval = this.getValue(); 
                            }
                        }
                    }
                ], [100, 0.1]);                
                
                // Flow Task
                formPane.addRow([{ element: 'Dash Flow', font: 'bold 12px arial, sans-serif' }], [0.1]);
                formPane.addRow([], [], 1.01, {background: '#43AFF1'});
                formPane.addRow([
                    {
                        checkBox: {
                            label: 'Enable Flow',  
                            selected: true,
                            onValueChanged: function(){
                                flowTask.enabled = this.getValue();
                            }
                        }
                    }, 
                    {
                        slider: {                    
                            min: 0,
                            max: 100,
                            value: flowTask.interval,                            
                            onValueChanged: function(){     
                                flowTask.interval = this.getValue(); 
                            }
                        }
                    }
                ], [100, 0.1]);  
                
                // Scale Task
                formPane.addRow([{ element: 'Alarm Scale', font: 'bold 12px arial, sans-serif' }], [0.1]);
                formPane.addRow([], [], 1.01, {background: '#43AFF1'});
                formPane.addRow([
                    {
                        checkBox: {
                            label: 'Enable Scale',  
                            selected: true,
                            onValueChanged: function(){
                                scaleTask.enabled = this.getValue();
                                if(!scaleTask.enabled){
                                    dataModel.each(function(data){
                                        if(data.a('scale.value') != null){
                                            data.a({
                                                'scale.value': 1
                                            });                                            
                                        }
                                    });
                                }                                
                            }
                        }
                    }, 
                    {
                        slider: {                    
                            min: 0,
                            max: 100,
                            value: scaleTask.interval,                            
                            onValueChanged: function(){     
                                scaleTask.interval = this.getValue(); 
                            }
                        }
                    }
                ], [100, 0.1]);                  
                
                // for PropertyView
                formPane.addRow([{ element: 'Individual Properties', font: 'bold 12px arial, sans-serif' }], [0.1]);
                formPane.addRow([], [0.1], 1.01, {background: '#43AFF1'});      
                
            }                                       
            
            function initPropertyPane(){
                serverProperties = [
                    {
                        name: 'scale.enabled',
                        displayName: 'Scale Enabled',
                        accessType: 'attr',                        
                        valueType: 'boolean',
                        editable: true,
                        setValue: function(data, property, value){
                            data.a('scale.enabled', value);
                            if(!value){
                                dataModel.sm().each(function(d){
                                    if(d.a('scale.value') != null){
                                        d.a({
                                            'scale.value': 1
                                        });                                            
                                    }
                                });                                
                            }
                        }
                    },
                    {
                        name: '3d.move.mode',
                        displayName: 'Move Mode',                        
                        editable: true,
                        accessType: 'style',
                        enum: {                            
                            values: ['xyz', 'xy', 'xz', 'yz', 'x', 'y', 'z', 'none']
                        }                        
                    },
                    {
                        name: 'alarm.color',
                        displayName: 'Alarm Color',
                        accessType: 'attr',                      
                        editable: true,
                        valueType: 'color',
                        colorPicker: {
                            instant: true
                        }
                    },
                    {
                        name: 'scale.value',
                        displayName: 'Scale Value',
                        accessType: 'attr'
                    },
                    {
                        name: 'scale.step',
                        displayName: 'Scale Step',                        
                        editable: true,
                        accessType: 'attr',
                        slider: {
                            min: 0,
                            max: 1,
                            step: 0.05
                        }
                    }
                ];             
                macProperties = [
                    {
                        name: 'blink.enabled',
                        displayName: 'Blink Enabled',
                        accessType: 'attr',                        
                        valueType: 'boolean',
                        editable: true,
                        setValue: function(data, property, value){
                            data.a('blink.enabled', value);
                            if(!value){
                                dataModel.sm().each(function(d){
                                    var color = d.a('origin.color');
                                    if(color){
                                        d.a({
                                            'screen.color': color,
                                            'blink.color': 'black'
                                        });
                                    }
                                });                                
                            }
                        }                        
                    },                    
                    {
                        name: 'screen.color',
                        displayName: 'Screen Color',
                        accessType: 'attr',
                        valueType: 'color',
                        editable: true
                    }, 
                    {
                        name: 'origin.color',
                        displayName: 'Origin Color',
                        accessType: 'attr',
                        valueType: 'color',
                        editable: true
                    } 
                ]; 
                edgeProperties = [
                    {
                        name: 'flow.enabled',
                        displayName: 'Flow Enabled',
                        accessType: 'attr',                        
                        valueType: 'boolean',
                        editable: true
                    },
                    {
                        name: 'flow.direction',
                        displayName: 'Flow Direction',                        
                        editable: true,
                        accessType: 'attr',
                        enum: {
                            values: [-1, 1], 
                            labels: ['mac to server', 'server to mac']
                        }                        
                    }, 
                    {
                        name: 'flow.step',
                        displayName: 'Flow Step',                        
                        editable: true,
                        accessType: 'attr',
                        slider: {
                            min: 0,
                            max: 10,
                            step: 0.1
                        }
                    },                    
                    {
                        name: 'edge.color',
                        displayName: 'Edge Color',
                        accessType: 'style',
                        valueType: 'color',
                        editable: true,
                        colorPicker: {
                            instant: true
                        }
                    },
                    {
                        name: 'edge.dash.color',
                        displayName: 'Dash Color',
                        accessType: 'style',
                        valueType: 'color',
                        editable: true,
                        colorPicker: {
                            instant: true
                        }
                    },
                    {
                        name: 'edge.width',
                        displayName: 'Edge Width',                        
                        editable: true,
                        accessType: 'style',
                        slider: {
                            min: 0,
                            max: 10,
                            step: 1
                        }
                    }
                ];                
                dataModel.sm().ms(function(e){                    
                    updateProperties();
                });
                updateProperties();
            }
            
            function updateProperties(){
                var data = dataModel.sm().ld();
                if(data instanceof ht.Node){
                    if(data.s('shape3d') === 'mac'){
                        propertyView.setProperties(macProperties);
                    }else{
                        propertyView.setProperties(serverProperties);
                    }                        
                }
                else if(data instanceof ht.Edge){
                    propertyView.setProperties(edgeProperties);
                }
                else{
                    propertyView.setProperties(null);
                }                
            }
            
        </script>
    </head>
    <body onload="init();">
    </body>
</html>
